<script setup lang="ts">
import { computed } from "vue"
import { Handle, Position, useVueFlow } from "@vue-flow/core"

const props = defineProps(["id", "data"])

const { updateNodeData } = useVueFlow()

const value = computed({
  get: () => props.data.value,
  set: (value) => updateNodeData(props.id, { value })
})
const code = computed({
  get: () => props.data.code,
  set: (code) => updateNodeData(props.id, { code })
})
</script>

<template>
  <span class="nodrag">名称</span>
  <el-input :id="`${id}-code`" v-model="value" placeholder="请输入智能体名称" class="" size="small" />
  <span class="nodrag" style="margin-top: 5px;">类名</span>
  <el-input :id="`${id}-input`" v-model="code" placeholder="请输入智能体类名" class="" size="small" />
  <Handle type="source" :position="Position.Right" :connectable="false" />
</template>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  font-size: 12px;
  &::placeholder {
    font-size: 12px;
  }
}
.nodrag {
  margin-bottom: 5px;
}
// :deep(.el-input__wrapper) {
//   background: rgba(236,245,255,0.1);
//   border-radius: 4px 4px 4px 4px;
//   border: 1px solid rgba(228,231,237,0.1);
// }
</style>
